<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form {
            width: 800px;
            height: 700px;
            margin: 40px auto;
            border: 1px #333 solid;
        }
        .content {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            border: 1px #333 solid;
            
        }
        
        .content h1 {
            text-align: center;
        }
        .content .bottom {
            width: 190px;
            height: 30px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .content label {
            width: 100px;
            height: 20px;
            text-align: right;
            text-align-last: right;
            display: inline-block;
        }
        .textarea {
            width: 100%;
            height: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="form">
        
        <div class="content">
            <h1>表单</h1>
            <label for="">用户名：</label> <input type="text" name="account" id="account" value=""><br>
            <br>
            <label for="">密码：</label>  <input type="password" name="passwd" id="passwd"><br>
            <br>
            <label for="">确认密码：</label>  <input type="password" name="passwd" id="repasswd"><br>
            <br>
            <label for="">性别：</label>  男<input type="radio" name="sex" id="" value="male"> 女<input type="radio" name="sex" id="" value="female"><br>
            <br>
            <label for="">爱好：</label>
                    篮球<input type="checkbox" name="hobbies" id="" value="basketball">
                    跑步<input type="checkbox" name="hobbies" id="" value="run">
                    游泳<input type="checkbox" name="hobbies" id="" value="swim"><br>
            <br>
            <label for="">专业：</label> 
                    <select name="subject" id="subject">
                    <option value="rjjs">软件技术</option>
                    <option value="jsjjs">计算机与技术</option>
                    </select><br>
            <br>
            <label for="">个人简历：</label> <br>
            <div class="textarea"><textarea name="resume" id="resume" cols="60" rows="10"></textarea></div><br>
            <br>
            <label for="">头像：</label>  <input type="file" name="" id=""><br>
            <br>
            <div class="bottom">
                <input type="submit" id="submit" value="提交">
                <input type="reset" value="重置">
            </div>
        </div>
    </div>
    <p id="out"></p>
    <p id="out2"></p>
    <p id="out3"></p>
    <p id="out4"></p>
    <p id="out5"></p>
    <p id="out6"></p>
    <p id="out7"></p>
    <script>
        window.onload = function() {
            let btn = document.getElementById("submit")

            let out = document.getElementById('out')
            let out2 = document.getElementById('out2')
            let out3 = document.getElementById('out3')
            let out4 = document.getElementById('out4')
            let out5 = document.getElementById('out5')

            btn.onclick = function() {
                let account = document.getElementById("account")
                console.dir(account.value)
                out.innerHTML = account.value
                
                let passwd = document.getElementById("passwd")
                console.dir(passwd.value)
                out2.innerHTML = passwd.value

                let rePasswd = document.getElementById("repasswd")
                console.dir(rePasswd.value)
                out3.innerHTML = rePasswd.value

                let sex = document.getElementsByName("sex")
                let sexMap = new Map
                sexMap.set("male", '男')
                sexMap.set("female", '女')
                sex.forEach(element => {
                    if (element.checked) {
                        console.log(sexMap.get(element.value))
                        out4.innerHTML = sexMap.get(element.value)
                    }
                });

                let hobbies = document.getElementsByName("hobbies")
                let hobbiesMap = new Map
                hobbiesMap.set("basketball", '篮球')
                hobbiesMap.set("run", '跑步')
                hobbiesMap.set("swim", '游泳')
                hobbies.forEach(element => {
                    if (element.checked) {
                        console.log(hobbiesMap.get(element.value))
                        out4.innerHTML = hobbiesMap.get(element.value)
                    }
                });



                let subject = document.getElementById("subject")
                let opts = subject.options
                console.log(opts)
                for (let i = 0; i < subject.length; i++) {
                    if (opts[i].index == subject.selectedIndex) {
                        out5.innerHTML = opts[i].text
                    }
                    
                }
                
                let resume = document.getElementById("resume")
                console.log(resume)
                out6.innerHTML = resume.value
                
                

            }



        }




    </script>

</body>
</html>